<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>state:{{$store.state.count}}</h1>
    <h1>getters:{{$store.getters.counts}}</h1>

    <h1>分模块getters:{{myname}}</h1>
    <button @click="chCount">改变mutations</button>

    <button @click="nameActions">分模块的actions</button>

    <button @click="mapMu.changeCount(19491001)">辅助函数法mutations</button>

    <h1>辅助函数法：{{mapData.token}}</h1>
  </div>
</template>
<script setup>
  import {ref,reactive,computed} from 'vue'
   // vue3中使用vuex 组合式api 
  import {useStore,mapState,mapGetters,mapMutations,mapActions} from 'vuex';

  let store=useStore();
 
  console.log(store.state.count)
  console.log(store.getters.counts)
// vuex中是state,和 getters建议 使用computed来包裹
 let myname=computed(()=>store.getters.myname)
// 调用主模块的mutations
 let chCount=()=>{
  store.commit("changeCount",10086)
 }
// 调用分模块的actions
 let nameActions=()=>{
  store.dispatch("about/actName","痛仰乐队")
 }

//  vue2辅助函数法 mapState,mapGetters 注入计算属性computed使用
// mapMutations,mapActions 注入方methods法使用

let mappers=mapState(["count","token"])




let mapData={};
Object.keys(mappers).forEach((item)=>{
    mapData[item]=computed(mappers[item].bind({$store:store}))
})
console.log(mapData,"----------------")

// 辅助函数法 将mapMutations mapActions方法 解构使用
console.log(mapMutations(["changeCount"]),"----------")

let mulist=mapMutations(["changeCount"]);

let mapMu={};
Object.keys(mulist).forEach((item)=>{
  // 辅助函数法  改变this指向在使用
    mapMu[item]=mulist[item].bind({$store:store})
})









</script>